<template>
	<view class="container-view">
		<view class="header">
			<view class="title">
				{{title}}
			</view>
			<view class="selectDate" @click="showPicker">
				{{timeFormat}}
			</view>

		</view>
		<!-- v-if="loading" -->
		<view class="charts-view" >
			<qiun-data-charts  :canvasId="echarts_id" :disableScroll="false" :ontouch="true" type="area" :opts="opts"
				:chartData="chartData" />
		</view>
		<u-picker :defaultTime="time" :safeAreaInsetBottom="true" v-if="show" mode="time" @confirm="confirm"
			v-model="show" :params="params" confirm-color="#0A69FD" cancel-color="#666F83"></u-picker>
	</view>
</template>

<script>
	import {
		getDate
	} from "@/utils/date.js"
	import qiunDataCharts from "@/src/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	import {
		getWellHeadAnalysedDailyProductionLine_api,
		getWellHeadAnalysedDailyAverageWaterContentRateLine_api,

	} from "@/service/services.js"
	export default {
		components: {
			'qiun-data-charts': qiunDataCharts
		},
		props: {
			echarts_id: {
				type: String,
				default: "",
			},
			title: {
				type: String,
				default: "",
			},
			color: {
				type: String,
				default: ""
			},
			activeTime: {
				type: String,
				default: "年"
			},
			rt: {
				type: String,
				default: "y"
			},
			seriesName: {
				type: String,
				default: ""
			},
			id: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				time: new Date().getFullYear().toString(),
				timeFormat: new Date().getFullYear() + '年',
				sdate: '',
				edate: '',
				show: false,
				loading:false,
				chartData: {
					// categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2016", "2017", "2018", "2019", "2020",
					// 	"2021"
					// ],
					categories:[],
					series: [{
						color: this.color,
						name: this.seriesName,
						data:[]
						// data: [35, 36, 31, 33, 13, 34, 35, 36, 31, 33, 13, 34]
					}],
				},
				opts: {
					enableScroll: true,
					xAxis: {
						disabled: false, //是否展示x轴label
						axisLine: false,
						scrollShow: false,
						itemCount: 5,
						disableGrid: false,
						axisLineColor: '#5F636B',
						fontColor: '#5F636B',
						rotateLabel:true
					},
					yAxis: {
						"disabled": false,
						"disableGrid": true,
						"splitNumber": 5,
						"gridType": "solid",
						"dashLength": 8,
						"gridColor": "#C0C9E0",
						// "padding": 10,
						"showTitle": false,
						fontColor: '#5F636B',
						"data": []
					},
					extra: {
						area: {
							type: 'curve',
							addLine: true,
							gradient: true,
						},
					},
					legend: {
						show: false
					},
				}
			}
		},
		computed: {
			params() {
				if (this.activeTime === '年') {
					return {
						year: true,
					}
				} else if (this.activeTime === '月') {
					return {
						year: true,
						month: true,

					}
				} else {
					return {
						year: true,
						month: true,
						day: true,
					}
				}
			}

		},
		watch: {
			activeTime() {
				console.log("数据变更了1")
				this.initTime()
				this.reqInit()
			},

			id: {
				handler(newData, oldData) {
					if(newData!==''){
						console.log("数据变更了")
						this.initTime()
						this.reqInit()
					}
					
				},
				immediate: true
			},


		},
		onReady() {},
		mounted() {},
		methods: {
			reqInit(){
				if(this.echarts_id==='one'){
					this.getWellHeadAnalysedDailyProductionLineFn()
				}else{
					this.getWellHeadAnalysedDailyAverageWaterContentRateLineFn()
				}
			},
			confirm(e){
				this.initTime(e)
				this.reqInit()
			},
			initTime(e) {
				
				if (!e) {
					let date = getDate(new Date())
					e = {
						year: date.slice(0, 4),
						month: date.slice(5, 7),
						day: date.slice(8, 10)
					}
					console.log(e)
				}
				
				console.log("activeTime:"+this.activeTime)
				switch (this.activeTime) {
					case '年':
						this.time = e.year.toString()
						this.timeFormat = e.year + '年'
						this.getYearDays(e.year)
						break;
					case '月':
						this.time = e.year + '-' + e.month
						this.timeFormat = e.year + '年' + e.month + '月'
						this.getMonthDays(e.year + '-' + e.month)
						break;
					case '周':
						this.time = e.year + '-' + e.month + '-' + e.day
						this.getWeekDays(e.year + '-' + e.month + '-' + e.day)
						break;
					case '日':
						this.time = e.year + '-' + e.month + '-' + e.day
						this.timeFormat = e.year + '年' + e.month + '月' + e.day + '日'
						let time = Number(new Date(this.time).getTime() - 24 * 60 * 60 * 1000)
						this.sdate = getDate(new Date(time));
					    this.edate = getDate(new Date(this.time));
						break;
					default:
						break;
				}
			
			},
			getYearDays(time) {
				this.sdate = getDate(new Date(time, 0, 1));
				let timeCom = new Date(getDate(new Date(Number(time) + 1, 0, 0))).getTime() + 24 * 60 * 60 * 1000
				this.edate = getDate(new Date(timeCom))
			},
			getMonthDays(time) {
				var now = new Date(time); //当前日期
				var nowMonth = now.getMonth(); //当前月
				var nowYear = now.getFullYear(); //当前年
				//本月的开始时间
				var monthStartDate = new Date(nowYear, nowMonth, 1);
				//本月的结束时间
				var monthEndDate = new Date(nowYear, nowMonth + 1, 1);
				var timeStar = Date.parse(monthStartDate); //s
				var timeEnd = Date.parse(monthEndDate); //s
				this.sdate = getDate(new Date(timeStar))
				this.edate = getDate(new Date(timeEnd))
			},
			getWeekDays(time) {
				var currentDate = new Date(time);
				var timesStamp = currentDate.getTime();
				var currenDay = currentDate.getDay();
				var dates = [];
				for (var i = 0; i < 8; i++) {
					dates.push(
						new Date(
							timesStamp + 24 * 60 * 60 * 1000 * (i - ((currenDay + 6) % 7))
						)
						.toLocaleDateString()
						.replace(/\//g, "-")
					);
				}
				this.timeFormat = getDate(new Date(dates[0]), '/') + '-' + getDate(new Date(dates[dates.length - 1]), '/')
				this.sdate = getDate(new Date(dates[0]));
				this.edate = getDate(new Date(dates[dates.length - 1]));
			},
			showPicker() {
				this.show = true
			},
			timeFormatFn() {
				switch (this.activeTime) {
					case '年':
						break;
					default:
						break;
				}
			},
			getWellHeadAnalysedDailyProductionLineFn() {
				this.loading = false
				getWellHeadAnalysedDailyProductionLine_api({
					id: this.id,
					rt: this.rt,
					sdate: this.sdate,
					edate: this.edate,
				}).then((res) => {
					let data = res.data || {};
					var e_label = [];
					var e_data = [];
					for (let key in data) {
					  e_label.push(key);
					  e_data.push(data[key].production);
					}
					this.chartData.categories = e_label
					this.chartData.series[0].data = e_data
					this.loading = true

				});
			},
			getWellHeadAnalysedDailyAverageWaterContentRateLineFn() {
			  this.two_loading = true
			  getWellHeadAnalysedDailyAverageWaterContentRateLine_api({
			    id: this.id,
			    rt: this.rt,
			    sdate: this.sdate,
			    edate: this.edate,
			  }).then((res) => {
			    let data = res.data || {};
			    var e_label = [];
			    var e_data = [];
			    for (let key in data) {
			      e_label.push(key);
			      e_data.push(data[key].averageWaterContentRate);
			    }
			    this.chartData.categories = e_label
			    this.chartData.series[0].data = e_data
			    this.two_loading = false
			  });
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container-view {
		padding: 0 28upx;
		box-sizing: border-box;
	}
	.charts-view{
		// height: 300px;
	}
	.header {
		display: flex;
		justify-content: space-between;
		margin: 48upx 0 32upx 0;

		.title {
			font-size: 28upx;
			font-family: PingFangHK-Regular, PingFangHK;
			font-weight: 400;
			color: #5F636B;
			line-height: 36upx;
		}

		.selectDate {
			font-size: 28upx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #5F636B;
			line-height: 36upx;
		}
	}
</style>
